<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名系统 - PLUS</title>
    <style>
        :root {
            --primary-color: #6366f1;
            --secondary-color: #8b5cf6;
            --accent-color: #ec4899;
            --textbook-color: #10b981;
            --bg-color: #f8fafc;
            --card-color: #ffffff;
            --text-color: #334155;
            --highlight-color: #e0e7ff;
            --textbook-highlight-color: #d1fae5;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
            min-height: 100vh;
            color: var(--text-color);
        }
        
        .container {
            background: var(--card-color);
            border-radius: 1.5rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            padding: 2.5rem;
            width: 100%;
            max-width: 120rem;
        }
        
        h1 {
            text-align: center;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .sections-container {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
        }
        
        .section {
            flex: 1;
            min-width: 300px;
            background: #fafafa;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0 0 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #e2e8f0;
            text-align: center;
        }
        
        .student-section .section-title {
            color: var(--primary-color);
        }
        
        .textbook-section .section-title {
            color: var(--textbook-color);
        }
        
        .timer {
            font-size: 1.25rem;
            text-align: center;
            margin: 1.5rem 0;
            font-weight: 600;
        }
        
        .student-timer {
            color: var(--primary-color);
        }
        
        .textbook-timer {
            color: var(--textbook-color);
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin: 2rem 0;
        }
        
        button {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            padding: 0.75rem 1.75rem;
            border-radius: 9999px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
        }
        
        .textbook-btn {
            background: linear-gradient(135deg, var(--textbook-color), #34d399);
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
        }
        
        .textbook-btn:hover {
            box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);
        }
        
        button:disabled {
            background: #e2e8f0;
            color: #94a3b8;
            transform: none;
            box-shadow: none;
            cursor: not-allowed;
        }
        
        .name-table {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
            max-height: 300px;
            overflow-y: auto;
            padding: 0.5rem;
        }
        
        .textbook-table {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        }
        
        .name-cell {
            background: white;
            padding: 1.25rem 0.5rem;
            text-align: center;
            border-radius: 0.75rem;
            transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
            font-weight: 500;
            border: 1px solid #e2e8f0;
            position: relative;
            overflow: hidden;
        }
        
        .name-cell::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            transform: translateX(-100%);
            transition: transform 0.4s ease;
        }
        
        .textbook-cell::before {
            background: linear-gradient(90deg, var(--textbook-color), #34d399);
        }
        
        .name-cell.highlight {
            animation: highlight 1.2s ease-in-out infinite alternate;
            background: var(--highlight-color);
            border-color: var(--primary-color);
            z-index: 10;
        }
        
        .textbook-cell.highlight {
            animation: textbook-highlight 1.2s ease-in-out infinite alternate;
            background: var(--textbook-highlight-color);
            border-color: var(--textbook-color);
        }
        
        .name-cell.highlight::before {
            transform: translateX(0);
        }
        
        @keyframes highlight {
            0% {
                transform: translateY(0) scale(1);
                box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
            }
            50% {
                transform: translateY(-8px) scale(1.05);
                box-shadow: 0 15px 20px -5px rgba(99, 102, 241, 0.3);
            }
            100% {
                transform: translateY(0) scale(1);
                box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
            }
        }
        
        @keyframes textbook-highlight {
            0% {
                transform: translateY(0) scale(1);
                box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
            }
            50% {
                transform: translateY(-8px) scale(1.05);
                box-shadow: 0 15px 20px -5px rgba(16, 185, 129, 0.3);
            }
            100% {
                transform: translateY(0) scale(1);
                box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
            }
        }
        
        .name-cell.selected {
            background: linear-gradient(135deg, var(--accent-color), #f472b6);
            color: white;
            transform: scale(1.05);
            box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.3);
            border-color: transparent;
            animation: none;
        }
        
        .textbook-cell.selected {
            background: linear-gradient(135deg, var(--textbook-color), #34d399);
            box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3);
        }
        
        .name-cell.selected::before {
            display: none;
        }
        
        .result-display {
            text-align: center;
            padding: 1.5rem;
            margin: 1rem 0;
            border-radius: 1rem;
            font-size: 1.5rem;
            font-weight: 600;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            border: 2px dashed #e2e8f0;
        }
        
        .student-result {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .textbook-result {
            color: var(--textbook-color);
            border-color: var(--textbook-color);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .sections-container {
                flex-direction: column;
            }
            
            .container {
                padding: 1.5rem;
            }
            
            h1 {
                font-size: 1.75rem;
            }
            
            .section-title {
                font-size: 1.25rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>点名系统 - PLUS</h1>
        
        <div class="sections-container">
            <!-- 学生点名部分 -->
            <div class="section student-section">
                <div class="section-title">学生点名</div>
                
                <div class="timer student-timer" id="timer">准备开始</div>
                
                <div class="controls">
                    <button id="startBtn">开始点名</button>
                    <button id="stopBtn" disabled>停止</button>
                </div>
                
                <div class="result-display student-result" id="studentResult">等待点名结果...</div>

                <div class="name-table" id="nameTable"></div>
            </div>
            
            <!-- 课文点名部分 -->
            <div class="section textbook-section">
                <div class="section-title">课文随机选择</div>
                
                <div class="timer textbook-timer" id="textbookTimer">准备开始</div>
                
                <div class="controls">
                    <button class="textbook-btn" id="textbookStartBtn">开始选择课文</button>
                    <button class="textbook-btn" id="textbookStopBtn" disabled>停止</button>
                </div>
                
                <div class="result-display textbook-result" id="textbookResult">等待课文选择结果...</div>

                <div class="name-table textbook-table" id="textbookTable"></div>
            </div>
        </div>
    </div>

    <script>
        // 学生名单
        const names = [
            "史婷", "孙佳乐", "李程", "孙博文", "李永杰", "任泽洋", "张沛", "张星宇", "徐宇坤", 
            "赵佳欣", "魏华", "朱锦坤", "韩晨阳", "弥嘉诚", "赵鑫宝", "魏亚敏", "赵梦琪", "史璐洁", 
            "梁欣阳", "姜海波", "孙月", "刘瀚泽", "王佳琳", "胡定元", "池琪琪", "杨启业", "胡宇航", 
            "王一豪", "池文福", "郑云博", "郑宇涵", "史文杰", "王嘉琦", "肖一诺", "闫文强", "刘淼", 
            "刘琳", "赵玉哲", "徐翔", "杨森", "衡文磊", "赵亚卫", "林瑞婷", "王琳", "刘思睿", 
            "肖一凡", "袁佳鑫", "焦嘉昕", "成欣怡", "邹一鹏", "安宇飞", "赵振龙", "席妍", "王远增", 
            "张文龙", "王文杰"
        ];
        
        // 课文列表
        const textbooks = [
            "《沁园春·长沙》", "《雨巷》", "《我愿意是急流》", "《荷塘月色》", 
            "《伐檀》", "《无衣》", "《念奴娇·赤壁怀古》", "《子路》", 
            "《劝学》", "《师说》", "《静女》", "《短歌行》", 
            "《春江花月夜》", "《燕歌行》", "《李凭箜篌引》"
        ];
        
        // 学生点名相关元素
        const nameTable = document.getElementById('nameTable');
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const timerDisplay = document.getElementById('timer');
        const studentResult = document.getElementById('studentResult');
        
        // 课文点名相关元素
        const textbookTable = document.getElementById('textbookTable');
        const textbookStartBtn = document.getElementById('textbookStartBtn');
        const textbookStopBtn = document.getElementById('textbookStopBtn');
        const textbookTimerDisplay = document.getElementById('textbookTimer');
        const textbookResult = document.getElementById('textbookResult');
        
        // 学生点名状态变量
        let isRolling = false;
        let highlightInterval;
        let currentHighlightIndex = 0;
        let countdown = 3;
        let countdownInterval;
        let selectedNames = [];
        
        // 课文点名状态变量
        let isTextbookRolling = false;
        let textbookHighlightInterval;
        let currentTextbookHighlightIndex = 0;
        let textbookCountdown = 3;
        let textbookCountdownInterval;
        let selectedTextbooks = [];

        // 初始化学生名单表格
        function initTable() {
            nameTable.innerHTML = '';
            names.forEach((name, index) => {
                const cell = document.createElement('div');
                cell.className = 'name-cell';
                cell.textContent = name;
                cell.dataset.index = index;
                nameTable.appendChild(cell);
            });
        }

        // 初始化课文表格
        function initTextbookTable() {
            textbookTable.innerHTML = '';
            textbooks.forEach((textbook, index) => {
                const cell = document.createElement('div');
                cell.className = 'name-cell textbook-cell';
                cell.textContent = textbook;
                cell.dataset.index = index;
                textbookTable.appendChild(cell);
            });
        }

        // 开始随机点名学生
        function startRolling() {
            if (isRolling) return;
            
            isRolling = true;
            startBtn.disabled = true;
            stopBtn.disabled = false;
            countdown = 3;
            timerDisplay.textContent = `倒计时: ${countdown}秒`;
            
            // 清除之前的选择
            clearSelection();
            
            // 开始倒计时
            countdownInterval = setInterval(() => {
                countdown--;
                timerDisplay.textContent = `倒计时: ${countdown}秒`;
                if (countdown <= 0) {
                    stopRolling();
                }
            }, 1000);
            
            // 调整高亮切换速度为300ms
            highlightInterval = setInterval(highlightRandomCell, 300);
        }

        // 开始随机选择课文
        function startTextbookRolling() {
            if (isTextbookRolling) return;
            
            isTextbookRolling = true;
            textbookStartBtn.disabled = true;
            textbookStopBtn.disabled = false;
            textbookCountdown = 3;
            textbookTimerDisplay.textContent = `倒计时: ${textbookCountdown}秒`;
            
            // 清除之前的选择
            clearTextbookSelection();
            
            // 开始倒计时
            textbookCountdownInterval = setInterval(() => {
                textbookCountdown--;
                textbookTimerDisplay.textContent = `倒计时: ${textbookCountdown}秒`;
                if (textbookCountdown <= 0) {
                    stopTextbookRolling();
                }
            }, 1000);
            
            // 调整高亮切换速度为300ms
            textbookHighlightInterval = setInterval(highlightRandomTextbookCell, 300);
        }

        // 随机高亮学生单元格
        function highlightRandomCell() {
            const cells = document.querySelectorAll('#nameTable .name-cell');
            cells.forEach(cell => cell.classList.remove('highlight'));
            
            currentHighlightIndex = Math.floor(Math.random() * names.length);
            cells[currentHighlightIndex].classList.add('highlight');
        }

        // 随机高亮课文单元格
        function highlightRandomTextbookCell() {
            const cells = document.querySelectorAll('#textbookTable .name-cell');
            cells.forEach(cell => cell.classList.remove('highlight'));
            
            currentTextbookHighlightIndex = Math.floor(Math.random() * textbooks.length);
            cells[currentTextbookHighlightIndex].classList.add('highlight');
        }

        // 停止学生随机点名
        function stopRolling() {
            if (!isRolling) return;
            
            clearInterval(highlightInterval);
            clearInterval(countdownInterval);
            isRolling = false;
            startBtn.disabled = false;
            stopBtn.disabled = true;
            timerDisplay.textContent = "点名完成";
            
            const cells = document.querySelectorAll('#nameTable .name-cell');
            cells.forEach(cell => cell.classList.remove('highlight'));
            
            const selectedCell = cells[currentHighlightIndex];
            selectedCell.classList.add('selected');
            
            // 记录已选名字
            if (!selectedNames.includes(names[currentHighlightIndex])) {
                selectedNames.push(names[currentHighlightIndex]);
            }
            
            // 显示结果
            studentResult.textContent = `选中学生: ${names[currentHighlightIndex]}`;
        }

        // 停止课文随机选择
        function stopTextbookRolling() {
            if (!isTextbookRolling) return;
            
            clearInterval(textbookHighlightInterval);
            clearInterval(textbookCountdownInterval);
            isTextbookRolling = false;
            textbookStartBtn.disabled = false;
            textbookStopBtn.disabled = true;
            textbookTimerDisplay.textContent = "选择完成";
            
            const cells = document.querySelectorAll('#textbookTable .name-cell');
            cells.forEach(cell => cell.classList.remove('highlight'));
            
            const selectedCell = cells[currentTextbookHighlightIndex];
            selectedCell.classList.add('selected');
            
            // 记录已选课文
            if (!selectedTextbooks.includes(textbooks[currentTextbookHighlightIndex])) {
                selectedTextbooks.push(textbooks[currentTextbookHighlightIndex]);
            }
            
            // 显示结果
            textbookResult.textContent = `选中课文: ${textbooks[currentTextbookHighlightIndex]}`;
        }

        // 清除学生选择
        function clearSelection() {
            const cells = document.querySelectorAll('#nameTable .name-cell');
            cells.forEach(cell => cell.classList.remove('selected', 'highlight'));
            studentResult.textContent = "等待点名结果...";
        }

        // 清除课文选择
        function clearTextbookSelection() {
            const cells = document.querySelectorAll('#textbookTable .name-cell');
            cells.forEach(cell => cell.classList.remove('selected', 'highlight'));
            textbookResult.textContent = "等待课文选择结果...";
        }

        // 事件监听
        startBtn.addEventListener('click', startRolling);
        stopBtn.addEventListener('click', stopRolling);
        textbookStartBtn.addEventListener('click', startTextbookRolling);
        textbookStopBtn.addEventListener('click', stopTextbookRolling);

        // 初始化
        initTable();
        initTextbookTable();
    </script>
</body>
</html>